import React, {useEffect, useRef, useState} from 'react';
import {Button, Dialog, Field, Form, Input, Message, Overlay} from "@alifd/next";
import './index.css'
import MyIconFont from "../../../../components/MyIconFont";
import ColorPicker from "../../../../components/ColorPicker";

// 图标列表
const iconLists = [
    "icon-liangzitongji",
    "icon-shuma",
    "icon-yundonghuwai",
    "icon-bianji",
    "icon-Uzhan",
    "icon-tupian1",
    "icon-baobei1",
    "icon-shujumofang",
    "icon-shujutongji",
    "icon-shoucangjia",
    "icon-shuipingzuo",
    "icon-shuangyuzuo",
    "icon-mojiezuo",
    "icon-chunvzuo",
    "icon-shizizuo",
    "icon-juxiezuo",
    "icon-tianhezuo",
    "icon-sheshouzuo",
    "icon-tianchengzuo",
    "icon-shuangzizuo",
    "icon-jinniuzuo",
    "icon-muyangzuo",
    "icon-zhuanji",
    "icon-pubuliu",
    "icon-quanbu",
    "icon-wenzhang",
    "icon-baobei",
    "icon-dianpu",
    "icon-dazahui",
    "icon-sheyinglvxing",
    "icon-gaoxiaoquwei",
    "icon-mingxing",
    "icon-chongwu",
    "icon-DIY",
    "icon-meishi",
    "icon-qinggan",
];

// 颜色列表
const iconColorLists = [
    "#8118e1",
    "red",
    "#909090"
];



const CreateProjectDialog = (props) => {
    const [iconType, setIconType] = useState()
    const [iconColor, setIconColor] = useState()

    const [visible, setVisible] = useState(false);

    const {searchProject} = props;

    useEffect(() => {
        setIconType("icon-liangzitongji")
        setIconColor("#8118e1")
    }, [visible])

    const [overlayVisible, setOverlayVisible] = useState(false);

    const projectIconRef = useRef(null);

    const FormItem = Form.Item;

    let field = Field.useField();

    // eslint-disable-next-line no-unused-vars
    const {init, reset, resetToDefault} = field;

    const formItemLayout = {
        labelCol: {span: 6},
        wrapperCol: {span: 14}
    };

    const iconColorChange = (color) => {
        setIconColor(color)
    }
    const iconTypeChange = (type) => {
        setIconType(type)
    }

    const createProjectDialogOnOpen = () => {
        setVisible(true)
    }

    const onCreateProject = () => {
        const myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        const raw = JSON.stringify({
            "projectName": field.getValue("projectName"),
            "icon": JSON.stringify({
                "iconType": iconType,
                "iconColor": iconColor
            }),
            "projectDescription": field.getValue("projectDescription")
        });

        const requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
        };

        const loginUser = JSON.parse(window.localStorage.getItem("icip-dingtalk-loginUser"));
        const corpId = window.localStorage.getItem("icip-dingtalk-corpId");

        fetch(`${window.appConfig.servicePath}/project/creatProject?corpId=${corpId}&userId=${loginUser.userId}`, requestOptions)
            .then(response => response.json().then(result => {
                console.log(result)
                Message.show("新建成功！")
                setTimeout(()=>{
                    searchProject()
                },800)
                onClose();
            }))
            .catch(error => console.log('error', error));
    }
    const onClose = () => {
        // 重置项目名称、项目描述为默认值，并关闭弹窗
        resetToDefault(["projectName", "projectDescription"])
        setVisible(false)
    }

    const overlayOnClose = () => {
        setOverlayVisible(false)
    }

    return (
        <div>
            <Button type={"primary"} onClick={createProjectDialogOnOpen}>新建项目</Button>
            <Dialog
                v2
                title="新建项目"
                visible={visible}
                onOk={onCreateProject}
                onClose={onClose}
                className="createProjectDialog"
            >
                <Form {...formItemLayout} colon>
                    <FormItem
                        name="projectName"
                        label="项目名称"
                        required
                        requiredMessage="请输入项目名称!"
                    >
                        <Input {...init("projectName")}/>
                    </FormItem>
                    <FormItem
                        name="projectIcon"
                        label="项目图标"
                        required
                    >
                        <div className="projectIcon_box" ref={projectIconRef} onClick={() => setOverlayVisible(true)}>
                            <MyIconFont
                                type={iconType}
                                color={iconColor}
                                size={"xl"}/>
                        </div>
                        <Overlay
                            v2
                            visible={overlayVisible}
                            target={projectIconRef.current}
                            cache
                            safeNode={projectIconRef.current}
                            onRequestClose={overlayOnClose}
                        >

                            <div className="projectIcon_overlay">
                                <div className="projectIcon_overlay_IconBox">

                                    {iconLists.map((item, index) => (
                                        <div onClick={() => iconTypeChange(item)} key={index}>
                                            <MyIconFont
                                                type={item}
                                                color={"#696969"}
                                                size={"medium"}/>
                                        </div>
                                    ))}
                                </div>
                                <div className="color_change_box">
                                    {iconColorLists.map((item, index) => {
                                        return (
                                            <div onClick={() => iconColorChange(item)} key={index}>
                                                <ColorPicker color={item}/>
                                            </div>
                                        )
                                    })}

                                </div>
                            </div>
                        </Overlay>
                    </FormItem>
                    <FormItem
                        name="projectDescription"
                        label="项目描述"
                    >
                        <Input.TextArea {...init("projectDescription")}/>
                    </FormItem>
                </Form>

            </Dialog>
        </div>

    );
};

export default CreateProjectDialog;